<template>
	<div class="theme">
		<van-nav-bar left-arrow @click-left="$router.back(-1)"></van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="indep-title">
					<p>可用余额</p>
					<p><span v-text="balance"></span> USDT</p>
					<p style="text-align: center;padding: 10px 0;"><img src="../assets/images/indep1.png" height="110px" /></p>
					<p style="text-align: center;">
						<span class="order" @click="orderShow = true;intoNum = list[0].intoNum + '';">我的下单
						<van-icon name="arrow" size="15px" color="#FFFFFF" />
						</span>
					</p>
				</div>
				<div class="indep-content">
					<div class="indep-content-tab">
						<div :class="tab ? 'tab-on' : ''" @click="tabChange(true)">收益介绍</div>
						<div :class="!tab ? 'tab-on' : ''" @click="tabChange(false)">我的参与</div>
					</div>
					<div class="indep-content-content">
						<div class="indep-card" v-for="(el,i) of list" v-if="tab" :key="++i" @click="placeOrder(el.intoNum)">
							<van-row style="color: #999999;">
								<van-col span="2">
									<img src="../assets/images/indep2.png" width="20px" />
								</van-col>
								<van-col span="12">投入金额（USDT)</van-col>
								<van-col span="10">每日收益</van-col>
							</van-row>
							<van-row>
								<van-col span="2"></van-col>
								<van-col span="12">
									<p>≥ <span v-text="el.intoNum"></span> USDT</p>
									<p v-if="list3[i]">
										< <span v-text="list3[i].intoNum"></span> USDT</p>
								</van-col>
								<van-col span="10" style="color: #fc6c6b;">
									<span v-text="parseFloat(el.minRatio * 100).toFixed(3).slice(0,-1) + '%'"></span> -
									<span v-text="parseFloat(el.maxRatio * 100).toFixed(3).slice(0,-1) + '%'"></span>
								</van-col>
							</van-row>
							<van-row>
								<van-col span="2"></van-col>
								<van-col span="12">
									<div class="indep-content-content-desc">
										<span>中低风险</span>
									</div>
								</van-col>
							</van-row>
						</div>
						<div v-if="!tab" class="indep-card2">
							<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
								<van-list v-model="loading4" :finished="finished" @load="onLoad" :finished-text="noDate">
									<div style="box-shadow: 1px 1px 10px 0px #e8e7e7;border-radius: 5px;padding: 10px 16px;margin: 4px 4px 15px;" @click="toDetail(el)" v-for="(el,i) in list2" :key="i">
										<van-cell :title="stringToTime(el.createTime)" is-link></van-cell>
										<div class="card-content">
											<van-progress :percentage="100" color="#ff4646" stroke-width="4px" :pivot-text="el.num" />
											<div>
												<van-row type="flex" justify="center" align="center" style="text-align: center;">
													<van-col span="8">
														<p>数量</p>
														<p v-text="el.num"></p>
													</van-col>
													<van-col span="8">
														<p>周期</p>
														<p><span v-text="el.cycle"></span>天</p>
													</van-col>
													<van-col span="8">
														<p>状态</p>
														<p class="red" v-text="formatStatus(el.statusId)"></p>
													</van-col>
												</van-row>
											</div>
										</div>
									</div>
								</van-list>
							</van-pull-refresh>
						</div>
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model="orderShow" :style="{width:'80%',padding:'20px',borderRadius:'10px',boxShadow:'1px 1px 15px 0px #dcd8d8',zIndex:'99'}" :overlay-style="{backgroundColor:'rgba(242,248,251,.7)',zIndex:'98'}" @close="orderClose">
			<div class="order">
				<div class="order-cell order-day">
					<span>周期</span>
					<span>
						<van-stepper v-model="day" :min="minDays" integer  />
					</span>
				</div>
				<div class="order-cell">
					<p>
						请输入数量
					</p>
					<p>
						<van-field v-model="num" maxlength="20" class="w-50" disabled @click="showKeyboard = true" :placeholder="intoNum"></van-field>
					</p>
				</div>
				<div class="order-cell">
					<p>
						请输入交易密码
					</p>
					<p>
						<van-field v-model="password" type="password" maxlength="20" class="password" disabled @click="showKeyboard2 = true"></van-field>
					</p>
				</div>
				<div class="order-cell">
					<p>
						<van-checkbox v-model="checked" checked-color="#44add5" :style="{display:'inline-block',marginRight:'5px',verticalAlign:'middle'}"></van-checkbox><span style="color: #44add5;position: relative;top: 2	px;" @click="$router.push({name:'Details',params:{'type':2}})">同意服务协议</span>
					</p>
				</div>
				<div class="order-btn">
					<p>
						<van-button type="default" color="#ff4646" :style="{width:'100%',margin:'50px 0 10px'}" @click="order" :loading="loading">确认</van-button>
					</p>
				</div>
			</div>
		</van-popup>
		<van-number-keyboard :show="showKeyboard" theme="custom" close-button-text="完成" @input="onInput" @delete="onDelete" @blur="showKeyboard = false" />
		<van-number-keyboard :show="showKeyboard2" theme="custom" close-button-text="完成" @input="onInput2" @delete="onDelete2" @blur="showKeyboard2 = false" />
	</div>
</template>

<script>
	let _this;
	import { base, home } from './../utils/api';
	import { formatDate } from './../utils/date';
	export default {
		name: 'IndependentPool',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				list2: [],
				list3: [],
				tab: true,
				orderShow: false,
				showKeyboard: false,
				showKeyboard2: false,
				num: '',
				password: '',
				checked: '',
				balance: '0.0000',
				loading: false,
				minDays: '1',
				day: '1',
				size: 10,
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading4: false,
				noDate: '没有更多了',
				intoNum: '',
				index: 0,
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
					this.getList();
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getList();
			},
			onInput(val) {
				if(this.num.includes('.') && val === '.') {
					return false;
				}
				if(this.num.indexOf('.') != -1 && this.num.indexOf('.') + 4 < this.num.length) {
					return false;
				}
				this.num += val;
				this.axios.get(process.env.API_HOST + "user/tansfer/fee/" + this.num + '/1').then(res => {
					if(res.data.code == 200) {
						this.fee = parseFloat(res.data.data).toFixed(5).slice(0, -1);
					}
				});
			},
			onInput2(val) {
				if(this.password.length == 6) {
					return false;
				}
				this.password += val;
			},
			onDelete2() {
				this.password = this.password.slice(0, -1)
			},
			onDelete() {
				this.num = this.num.slice(0, -1)
			},
			getBalance() {
				base.getMyInfo().then(res => {
					this.balance = parseFloat(res.data.availableNum).toFixed(5).slice(0, -1);
				})
			},
			getList() {
				home.getIncomeProfile().then(res => {
					if(res.code == 200) {
						this.list3 = JSON.parse(JSON.stringify(res.data));
						this.list = res.data;
//						this.num = this.list[0].intoNum;
						this.intoNum = this.list[0].intoNum;
					}
				})

				home.getOrderDay().then(res => {
					if(res.code == 200) {
						this.minDays = res.data.value;
						this.day = res.data.value;
					}
				})

				home.myParticipation({
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list2 = res.data.records;
						if(this.list2 == '') {
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading4 = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading4 = false;
						}
					}
				})
			},
			order() {
				if(this.num == '') {
					this.$toast('请输入数量');
					return false;
				}
				if(Number(this.num) < this.list[0].intoNum) {
					this.$toast('下单数量不能小于最低数量');
					return false;
				}
				if(this.password == '') {
					this.$toast('请输入交易密码');
					return false;
				}
				if(this.password.length != 6) {
					this.$toast('交易密码必须为6位');
					return false;
				}
				if(!this.checked) {
					this.$toast('请确认并同意服务密码');
					return false;
				}
				this.loading = true;
				home.ipdPoolOrder({
					num: this.num,
					passWord: this.password,
					cycle: this.day
				}).then(res => {
					if(res.code == 200) {
						this.orderClose();
						this.$toast(res.msg);
						this.getBalance();
						this.getList();
					} else {
						this.loading = false;
						this.$toast(res.msg);
					}
				})
			},
			orderClose() {
				this.loading = false;
				this.num = '';
				this.password = '';
				this.day = this.minDays;
				this.orderShow = false;
			},
			toDetail(el) {
				this.$router.push({
					name: 'IndependentDetails',
					params: {
						'ipdPool': JSON.stringify(el)
					}
				})
			},
			tabChange(b) {
				this.tab = b;
				this.getList();
			},
			placeOrder(intoNum) {
				this.intoNum = intoNum;
				this.orderShow = true;
			},
			formatStatus(status) {
				switch(Number(status)) {
					case 1:
						return '打包中';
						break;
					case 2:
						return '打包成功';
						break;
					case 3:
						return '打包失败';
						break;
					case 4:
						return '已完成';
						break;
				}
			},
			stringToTime(str) {
				let time = new Date(str)
				var y = time.getFullYear()
				var m = time.getMonth() + 1
				var d = time.getDate()
				var h = time.getHours()
				var mm = time.getMinutes()
				var s = time.getSeconds()
				return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + time.toTimeString().substr(0, 8)
			}
		},
		created() {},
		mounted() {
			this.getBalance();
			this.getList();
			this.tab = Number(localStorage.nav) == 2 ? false : true;
		},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.order {
		font-size: 15px;
		.order-cell {
			margin-bottom: 20px;
			p {
				margin-bottom: 7px;
			}
		}
		.order-day {
			display: flex;
			span:first-child {
				margin-right: 15px;
			}
			.van-stepper {
				/deep/ .van-stepper__minus {
					background-color: transparent;
					color: #44add5;
					height: 20px;
				}
				/deep/ .van-stepper__plus {
					background-color: transparent;
					color: #ff3333;
					height: 20px;
				}
				/deep/ .van-stepper__input {
					color: #999999;
					background-color: #f5f5f5;
					border: 1px solid #44add5;
					border-radius: 5px;
					height: 20px;
					width: 40%;
				}
			}
		}
		.van-cell {
			background-color: #f5f5f5;
			padding: 5px 16px;
			border-radius: 5px;
		}
		.password {
			/deep/.van-field__control {
				text-align: center;
			}
		}
		/deep/.van-checkbox__label {
			color: #44add5;
		}
	}
	
	.overlay-content {
		padding: 10px;
		.indep-title {
			font-size: 15px;
			color: #59595b;
			margin-bottom: 30px;
			.order {
				color: #FFFFFF;
				background: #ff4646;
				border-radius: 100px;
				padding: 5px 8px 5px 14px;
				i {
					position: relative;
					top: 2px;
				}
			}
		}
		.indep-content {
			.indep-content-tab {
				font-size: 15px;
				color: #FFFFFF;
				border-bottom: 1px solid #f4b56b;
				padding-bottom: 20px;
				.tab-on {
					background: #f4b56b !important;
				}
				div {
					display: inline-block;
					background: #cccccc;
					padding: 5px 13px;
					border-radius: 5px;
				}
				div:not(:first-child) {
					margin-left: 15px;
				}
			}
			.indep-content-content {
				padding: 20px 0px;
				.van-row {
					margin-bottom: 10px;
				}
				.indep-content-content-desc {
					span {
						font-size: 12px;
						color: #ffa26d;
						background: #fdebda;
						padding: 3px 10px;
						border-radius: 15px;
					}
				}
				.indep-card {
					margin-bottom: 25px;
				}
				.indep-card2 {
					/deep/ .van-cell {
						padding: 0;
					}
					.van-cell:not(:last-child)::after {
						border-bottom: 0;
					}
					.card-content {
						margin-top: 10px;
						.van-col {
							p:first-child {
								color: #999999;
								padding: 20px 0;
							}
						}
						.red {
							color: #fc6c6b;
						}
					}
				}
			}
		}
	}
	
	/deep/ .van-nav-bar {
		background-color: #FFFFFF;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: #999999;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	.van-nav-bar__left {
		left: 8px;
	}
	
	.van-cell--clickable:active {
		background-color: transparent;
	}
	
	.w-50 {
		width: 50%;
	}
</style>